<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CSS 定位</title>

	<style>
		.box1{
			height: 300px;
			background-color: aquamarine;
		}

		.box1-normal{
			background-color: purple;
			width: 50px;
			height: 50px;
		}

		.box1-relative{
			background-color: pink;
			width: 50px;
			height: 50px;
			position: relative;
			left: 100px;
			bottom: 1px;
		}

		.box2{
			background-color: yellowgreen;
			height: 300px;
			margin-bottom: 300px;
		}

		.box2-normal{
			background-color: blue;
			width: 50px;
			height: 50px;
		}

		.box2-absolute{
			background-color: pink;
			width: 50px;
			height: 50px;
			position: absolute;
			left: 50px;
			top: 1000px;
		}

		.fixed{
			width: 50px;
			height: 50px;
			background-color: black;
			position: fixed;
			right: 0;
			top: 300px;
		}
	</style>
</head>
<body>
	<h1>相对定位</h1>
	<div class="box1">
		<div class="box1-normal"></div>
		<div class="box1-relative"></div>
		<div class="box1-normal"></div>
	</div>

	<h1>绝对定位</h1>
	<div class="box2">
		<div class="box2-normal"></div>
		<div class="box2-absolute"></div>
		<div class="box2-normal"></div>
	</div>

	<h1>固定定位</h1>
	<div class="fixed"></div>
</body>
</html>